<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Crafty - Crafty.js Modules</title>
	<link type="text/css" rel="stylesheet" href="/craftyjs-site.css" />

	<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' 	type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<link rel="shortcut icon" href="/favicon.ico">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="/github.css"/>
	<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-23935213-2']);
		_gaq.push(['_trackPageview']);

		(function () {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

	</script>
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="/"> <img class="logo" src="/images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="/">Home</a></li>
						<li><a href="/getting-started/">Getting started</a></li>
						<li><a href="/documentation/">Documentation</a></li>
						<li><a href="/api/">API</a></li>
						<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
						<li><a href="/components/">Components</a></li>
						<li class="emph"><a href="/#install">Download</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="components-div">
  <div id="components-summary">
    <h2>Components</h2>
    <p>An overview over components made by the community.</p>
    <p>If you would like your component listed here, create an issue or PR <a href="https://github.com/craftyjs/craftyjs.github.com">on Github.</a></p>
    <p>Note that some components may be outdated and may no longer work with the most recent Crafty version.</p>
  </div>
  <div id="appView">
    <div class="component-count" style="font-weight: bold;"></div>
    <ul id="component-list"></ul>
  </div>
</div>


<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script>
  var ComponentModel = Backbone.Model.extend({});
  var ComponentView = Backbone.View.extend({
    template: _.template('<li><a href="<%= link %>"><%= name %></a></li>'),
    initialize: function() {
      this.listenTo(this.model, "change", this.render);
    },
    render: function() {
      this.$el.html(this.template(this.model.attributes));
      return this;
    }
  });
  var ComponentCollection = Backbone.Collection.extend({
    model: ComponentModel,
    url: '/components/components.json'
  });
  var Components = new ComponentCollection;

  var AppView = Backbone.View.extend({
    el: $('#appView'),
    initialize: function(){
      Components.fetch();
      this.listenTo(Components, 'add', this.addOne);
      this.listenTo(Components, 'reset', this.addAll);
      this.listenTo(Components, 'all', this.render);

    },
    addOne: function(component) {
      var view = new ComponentView({model: component});
      this.$('#component-list').append(view.render().el);
    },
    addAll: function() {
      Components.each(this.addOne, this);
    },
    render: function() {
      this.$el.find('.component-count').text('There are ' + Components.length + ' components:');
      // Nothing really change in the app yet
      // TODO Search, Columns
    }
  });
  var App = new AppView;
</script>

			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="/images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="/images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="/images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="/">Home</a></li>
				<li><a href="/getting-started/">Getting started</a></li>
				<li><a href="/documentation/">Documentation</a></li>
				<li><a href="/api/">API</a></li>
				<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
				<li><a href="/components/">Modules</a></li>
				<li class="emph"><a href="/#install">Download</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
